
<script type="text/javascript" src="../../../scripts/date.js"></script>
<link rel="stylesheet" type="text/css" href="../../../styles/extii/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../../scripts/extii/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../../scripts/extii/ext-all.js"></script>
    <script type="text/javascript" src="../../../scripts/extii/RowExpander.js"></script>
    
    <style type="text/css">
        body .x-panel {
            margin-bottom:20px;
        }
        .icon-grid {
            background-image:url(../../../images/extii/shared/icons/fam/grid.png) !important;
        }
        #button-grid .x-panel-body {
            border:1px solid #99bbe8;
            border-top:0 none;
        }
        .add {
            background-image:url(../../../images/extii/shared/icons/fam/add.gif) !important;
        }
        .option {
            background-image:url(../../../images/extii/shared/icons/fam/plugin.gif) !important;
        }
        .remove {
            background-image:url(../../../images/extii/shared/icons/fam/delete.gif) !important;
        }
        .save {
            background-image:url(../../../images/extii/shared/icons/save.gif) !important;
        }
        .details .x-btn-text {
				    background-image: url(../../../images/extii/shared/icons/details.gif);
				}
    </style>
    
<div id="topic-grid"></div>

<script type="text/javascript">
	/*
 * Ext JS Library 2.0
 * Copyright(c) 2006-2007, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){
	
	Ext.BLANK_IMAGE_URL = '../../../images/extii/s.gif';
	
	var jpageSize = 8;
  var filerTxt = "jron";

	Ext.QuickTips.init();
	
	
    function formatDates(value) {
        return value ? formatDate(new Date(value["time"]),"yyyy-MM-dd HH:mm:ss a"): '';
    } 
        
    function renderSex(value){
    	if(value == 'MALE') return "<img src='../../../images/extii/shared/icons/fam/user_suit.png'/>";
    	else if(value == 'FEMALE') return "<img src='../../../images/extii/shared/icons/fam/user_female.png'/>";
    	else return "<img src='../../../images/extii/shared/icons/fam/member.png'/>";
    }
    	
	var NewAccount = Ext.data.Record.create([
    {name: 'id', type: 'int'},
    {name: 'regDate', mapping: 'regDate', type: 'date',convert :formatDates},
    {name: 'username', type: 'string'},
    {name: 'sex',type: 'string'},
    {name: 'email', type: 'string'},
    {name: 'firstName', type: 'string'},
    {name: 'lastName', type: 'string'},
    {name: 'companyName', type: 'string'},
    {name: 'userGroup', type: 'string'},
    {name: "address.city", mapping:"address.city", type: "string"}
            ]);        
	
	var expander = new Ext.grid.RowExpander({
        tpl : new Ext.Template(
            '<p><b>Company:</b> {companyName}<br>',
            '<p><b>Summary:</b> {email}</p>'
        )
    });
    
    var store = new Ext.data.GroupingStore({
    	reader: new Ext.data.JsonReader({
            root: 'results',
            totalProperty: 'totalCount',
            id: 'id',
            fields: NewAccount
        }),
        proxy:new Ext.data.ScriptTagProxy({
            url: 'http://localhost:8080/admin/jsonusers.html?ajax=true'
        }),
        sortInfo:{field: 'regDate', direction: "desc"},
        groupField:'userGroup',
        remoteSort: true
    	});
          
    
    var cm = new Ext.grid.ColumnModel([
    //new Ext.grid.RowNumberer(),    
    {
        id: 'id',
        header: "Identify",
        dataIndex: 'id',
        width: 80,
        hidden:true
    },{
	    	header:"User Group",
	    	dataIndex:'userGroup',
	    	width:80,
	    	hidden:true
    },{
        header: "<img src='../../../images/extii/shared/icons/fam/member.png'/>",
        dataIndex:'sex',
        width:5,
        renderer:renderSex
    },{
        header: "Username",
        dataIndex:'username',
        width:80
    },{
        header:"E-mail",
        dataIndex:'email',
        width:120
    },{
        header:"City",
        dataIndex:'address.city',
        width:150
    },{
        header:"Signup Date",
        dataIndex:'regDate',
        width:140,
        render:formatDates
    },
    expander]);


    // by default columns are sortable
    cm.defaultSortable = true;

    var grid = new Ext.grid.GridPanel({
        el:'topic-grid',
        width:700,
        height:400,
        title:'ExtJS.com - Browse Forums',
        iconCls:'icon-grid',
        plugins: expander,
        collapsible: true,
        store: store,
        cm: cm,
        trackMouseOver:true,
        stripeRows: true,
        loadMask: true,
        view: new Ext.grid.GroupingView({
            forceFit:true,
            groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
        }),
        viewConfig: {
            forceFit:true,
            enableRowBody:true
        },
        tbar:['-',{
            pressed: true,
            enableToggle:true,
            text:'Add User',
            tooltip:'Add a new User',
            iconCls:'add',
            toggleHandler: doAdd
        },'-', {
		        pressed: true,
		        enableToggle:true,
		        text: 'Delete User',
		        tooltip:'Delete an User',
		        iconCls:'remove',
		        toggleHandler: doDel
		    }],

        bbar: new Ext.PagingToolbar({
            pageSize: jpageSize,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying users {0} - {1} of {2}',
            emptyMsg: "No users to display",
            items:[]
        })
        
    });
    
    
    // render it
    grid.render();
        
    var tb = grid.getTopToolbar();
    tb.addSeparator();
        
    filterBtn = new Ext.Toolbar.MenuButton({
        iconCls: 'x-btn-text-icon option', 
        cls: 'x-btn-text-icon',
        text: 'Choose Filter',
        tooltip: 'Select one of filter',
        menu: {items: [
                new Ext.menu.CheckItem({ text: 'City', value: 'address.city', checked: false, group: 'filter', checkHandler: onItemCheck }),
                new Ext.menu.CheckItem({ text: 'E-mail', value: 'email', checked: false, group: 'filter', checkHandler: onItemCheck }),
                new Ext.menu.CheckItem({ text: 'Username', value: 'username', checked: false, group: 'filter', checkHandler: onItemCheck })
                ]},
        minWidth: 105
    });
    
    tb.add(filterBtn);
    
    var filter = Ext.get(tb.addDom({ // add a DomHelper config to the toolbar and return a reference to it
        tag: 'input',
        type: 'text',
        size: '30',
        value: '',
        style: 'background: #F0F0F9;'
    }).el);
    
    // press enter keyboard
    filter.on('keypress', function(e) { // setup an onkeypress event handler
        if (e.getKey() == e.ENTER && this.getValue().length > 0 && filerTxt != "jron") {// listen for the ENTER key
            store.load({params:{start:0, limit:jpageSize}});
        }
    });

    filter.on('keyup', function(e) { // setup an onkeyup event handler
        if (e.getKey() == e.BACKSPACE && this.getValue().length === 0 && filerTxt != "jron") {// listen for the BACKSPACE key and the field being empty
            store.load({params:{start:0, limit:jpageSize}});
        }
    });
        
		function onItemCheck(item, checked)
    {
        if (checked) {
            filterBtn.setText(item.text + ':');
            filerTxt = item.value;
        }
    }        

		store.on('beforeload', function() {
        store.baseParams = { // modify the baseParams setting for this request
            filterValue: filter.getValue(),
            filterTxt: filerTxt
        };
    });
    
    // trigger the data store load
    store.load({params:{start:0, limit:jpageSize}});
    
    function doAdd(btn,pressed){
    	alert("hhhhh");
    }
    
    function doDel(btn,pressed){
    	
    }
});

</script>	
